<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>on 事件绑定</title>
    <script src="js/vue-2.7.14.js"></script>

</head>
<body>
    <!-- v-on:click 绑定点击事件  简写为 @click-->
    <!--
        鼠标事件：移动鼠标时，动态获取坐标
        键盘事件：获取按键
    -->
<div id="app">
    <button v-on:click="clickMe">点击我</button>
    <button @click="clickMe">点击我</button>

    <div @mousemove="move" style="width: 500px; height: 300px;border: solid red 1px;">

    </div>

    <input type="text" @keydown="testKey">
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

        },
        methods:{
            clickMe(){
                alert("点我");
            },
            move(event){
                //相对于当前元素的坐标(元素的左上角： 0:0)
                //console.log(event.offsetX +"::"+ event.offsetY);

                //相对于页面的坐标（页面的左上角坐标是 0:0）
                console.log(event.x +"::"+ event.y);
            },
            testKey(event){
                console.log(event);
                console.log(event.keyCode);
            }

        }
    });
</script>

</html>